/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Radio, Input } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast, Loading, Modal, ActionSheet } from '../../../library/func';
import Icon from '../../../project/style/icon';
import Http from '../../../project/func/http/http'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class OrderComment extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			background: '#f60',
			status: 'success',
			// 商品信息
			detail:{},
			// 用户添加评价
			enum_level:'好评',
			// 用户评价内容
			set_content:'',
			comment:[
				{value:'好评',text:'好评',checked:true},
				{value:'中评',text:'中评',checked:false},
				{value:'差评',text:'差评',checked:false}
			],
			// 图片
			upload:[
				{url:"http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg"},
				{url:"http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg"},
				{url:"http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg"},
				{url:"http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg"},
			],
			// 临时测试
			choose: null,
			choose1: null
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		console.log('评价订单=============',this.$router.params.oiid)
		// 取订单条目数据
		Http.get({
			url:'order/item.php?id=' + this.$router.params.oiid,
			success:(data)=>{
				this.setState({
					detail: data
				})
				console.log(data)
			}
		})
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {

	}
	
	// 用户提交评价
	addComment = () => {
		Http.post({
			url:'order/logic/comment.php',
			data:{
				oiid: this.state.detail.id,
				enum_level: this.state.enum_level,
				set_content: this.state.set_content,
				set_image: JSON.stringify([])
			},
			success:(data)=>{
				Toast.success('评价成功')
				setTimeout(()=>{
					wx.navigateTo({
						url: '/screen/user/order/list?status=已完成'
					});
				},1500)
			},
			error:(res) => {
				Toast.text(res.msg)
			}
		})
	}

	// 用户删除图片
	removeImage = (e) => {
		console.log('e======',e)
		e.stopPropagation()
		console.log(222)
	}

	// 上传图片
	uploadImage = (e) => {
		console.log('1111======',e)
        wx.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success :  (res) => {
				// tempFilePath可以作为img标签的src属性显示图片
				const tempFilePaths = res.tempFilePaths
				console.log(res)
				this.setState({
					choose: res.tempFilePaths
				})
			}
		})
	}

	onChange = (type, e)=> {
		if(type == 'level'){
			this.setState({
				enum_level: e.detail.value
			})
		}
		if(type == 'content'){
			this.setState({
				set_content: e.detail.value
			})
		}
	}

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent bg='#f5f5f5' h='1600'>
					
					{/* 评价的商品信息 */}
					<CRow bg='#fff' px='20' py='30' y='center' mt='20'>
						<CImage src='{{detail.set_image}}' w='140' h='140'/>
						<CColumn pl='20'>
							<CBetween y='top'>
								<CHand size='28' color='#252525'>{detail.set_name}</CHand>
								<CHand size='28' pl='30' pr='20'  color='#252525'>￥{detail.set_price}</CHand>
							</CBetween>
							<CLine pt='20' pr='16' x='right' y='top'>
								<CHand size='28' color='#aaa'>x{detail.count}</CHand>
							</CLine>
						</CColumn>
					</CRow>

					{/* 好评、中评、差评 */}
					<CRow bg='#fff' pa='30'>
						<RadioGroup class='w1' onChange={this.onChange.bind(this, 'level')}>
							<CBetween>
								{this.state.comment.map(item=>{
									return (
										<CHand y='center'>
											<Radio name='comment' value={item.value} checked={item.checked} color='#f8445c'></Radio>
											<CText size='28'>{item.text}</CText>
										</CHand>
									)
								})}
							</CBetween>
						</RadioGroup>
					</CRow>

					{/* 评价框 */}
					<CRow bg='#f6f6f6' py='20' px='40'>
						<CSvg icon={Icon.convert} w='40' h='40'></CSvg>
						<Input type='text' placeholderStyle='color:#b4b3b4' style='font-size:28rpx; margin-left:20rpx; width:100%' placeholder='请输入您宝贵的评价~' value={this.state.set_content} onInput={this.onChange.bind(this, 'content')}/>
					</CRow>

					{/* 上传评价图片 */}
					<CAround bg='#fff' pa='30'>
						{/* {this.state.upload.map(item=>{
							return ()
						})} */}
						{/* <CLine ba='dashed #ebebeb 1' x='center' y='center' rel h='60' mr='5' onClick={this.uploadImage}>
							{this.state.choose != null ? <CImage src={this.state.choose} w='60' h='60'/> : <CImage src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg" w='25' h='25'/>}

							{this.state.choose != null && <CHand abs top='-10' zindex='1' right='-5' onClick={this.removeImage.bind(this, '')}><CSvg icon={Icon.sub2} w='20' h='20'></CSvg></CHand>}
                        </CLine>
						<CLine ba='dashed #ebebeb 1' x='center' y='center' h='60' mr='5'>
                            <CImage src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg" w='25' h='25'/>
                        </CLine>
						<CLine ba='dashed #ebebeb 1' x='center' y='center' h='60' mr='5'>
                            <CImage src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg" w='25' h='25'/>
                        </CLine>
						<CLine ba='dashed #ebebeb 1' x='center' y='center' h='60' mr='5'>
                            <CImage src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg" w='25' h='25'/>
                        </CLine>
						<CLine ba='dashed #ebebeb 1' x='center' y='center' h='60'>
                            <CImage src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/img_03.jpg" w='25' h='25'/>
                        </CLine> */}
					</CAround>

				</CContent>

				{/* Footer */}
				<CFooter y='center'>
					<CRow mx='30' mb='20'>
						<CButton bg='#cb302e' py='20' ra='10' color='#fff' class='w1' style='font-size:30rpx;' onClick={this.addComment}>提交评价</CButton>
					</CRow>
				</CFooter>

			</CPage>
		)
	}
}


